<template>
	<view class="container">
		<view class="content">
			<view class="one">
				<view class="text">
					{{ $t('please_select_vacation_type') }}
				</view>
			</view>
			<view class="list">
				<view class="one d-rn d-ac d-jb" v-for="(item,index) in hostList" :key="index" @click="handleSts(item,index)">
					<view class="text">
						{{item.vacationName}}
					</view>
					<view class="img">
						<img :src="changeSts == index?item.img:item.Image" alt="">
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var _self
	import {getPersonHolidays} from '../../api/index.js'
	export default {
		data() {
			return {
				hostList: [],
				changeSts:-1,
			}
		},
		onLoad() {
			_self = this;
			_self.getList()
		},
		methods:{
			handleSts(item,index){
				_self.changeSts = index
				let data = {
					name:item.vacationName,
					id:item.id,
					minimumLeaveUnit:item.customVacation.minimumLeaveUnit
				}
				_self.$commonFun.goUrl(1,'../holidayApply/index',data)
			},
			
			getList(){
				getPersonHolidays().then(res=>{
					if(res.code == 200){
						_self.hostList = res.data
						_self.hostList.forEach(item=>{
							item.img = '../../static/img/yuanxingxuanzhong.png',
							item.Image = '../../static/img/yuanxingweixuanzhong.png'
						})
					}
				})
			}
		}
	}

</script>

<style lang="scss">
	.container{
		width: 100%;
		.one{
			padding: 20px;
			box-sizing: border-box;
			border-bottom: 1px solid #f6f6f6;
			.text{
				font-size: 30rpx;
				font-weight: bold;
			}
		}
		.content{
			width: 100%;
			.list{
				width: 100%;
				.one{
					padding: 20px;
					box-sizing: border-box;
					border-bottom: 1px solid #f6f6f6;
					.text{
						font-size: 30rpx;
						font-weight: normal;
					}
					.img{
						img{
							width: 36rpx;
							height: 36rpx;
						}
					}
				}
			}
		}
	}

</style>